<template>
  <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;min-height: 20px;"
    :style="{
        'background': nodeModel.background,
        'marginTop': nodeModel.marginTop/2+'px',
        'marginBottom': nodeModel.marginBottom/2+'px',
        'marginLeft': nodeModel.marginLeft/2+'px',
        'marginRight': nodeModel.marginLeft/2+'px',
        'paddingTop': nodeModel.paddingTop/2+'px',
        'paddingBottom': nodeModel.paddingBottom/2+'px',
        'paddingLeft': nodeModel.paddingLeft/2+'px',
      }">
    <div v-if="nodeModel.advertList.length==0" style="height: 40px;line-height: 40px;width: 100%;text-align: center;">暂无数据</div>
    <div v-for="(item, index) in nodeModel.advertList" :key="index" 
    style="display: flex;"
    :style="{
      'width': nodeModel.widthForFlex1/2+'px',
      'flex-direction': nodeModel.flex_directionForFlex1,
      'align-items': nodeModel.align_itemsForFlex1,
      'background': nodeModel.backgroundForFlex1,
      'marginTop': nodeModel.marginTopForFlex1/2+'px',
      'marginLeft': nodeModel.marginLeftForFlex1/2+'px',
      'paddingTop': nodeModel.paddingTopForFlex1/2+'px',
      'paddingBottom': nodeModel.paddingBottomForFlex1/2+'px',
      'paddingLeft': nodeModel.paddingLeftForFlex1/2+'px',
      }">
      <el-image :src="item.itemModel.coverUrl" fit="cover"
        style="flex-shrink: 0;"
        :style="{
          'width': nodeModel.widthForCover1/2 + 'px', 
          'height': nodeModel.heightForCover1/2 + 'px', 
          'borderRadius': nodeModel.borderRadiusForCover1/2 + 'px'
        }"></el-image>
      <div :style="{
        'paddingTop': nodeModel.paddingTopForFlex2/2+'px',
        'paddingBottom': nodeModel.paddingBottomForFlex2/2+'px',
        'paddingLeft': nodeModel.paddingLeftForFlex2/2+'px',
        'paddingRight': nodeModel.paddingRightForFlex2/2+'px',
      }">
        <!-- 商品名称 -->
        <div class="limitLineNumOfOne" v-if="nodeModel.isShowForText1" :style="{
          'marginTop': nodeModel.marginTopForText1/2+'px',
          'color': nodeModel.colorForText1,
          'font-size': nodeModel.fontsizeForText1/2 + 'px',
          'font-weight': nodeModel.fontweightForText1,
        }">{{item.itemModel.itemName}}</div>
        <!-- 原价 -->
        <div style="display: flex;flex-direction: row;align-items: center;" v-if="nodeModel.isShowForText2"
        :style="{
          'marginTop': nodeModel.marginTopForText2/2+'px',
          'color': nodeModel.colorForText2,
          'font-size': nodeModel.fontsizeForText2/2 + 'px',
          'font-weight': nodeModel.fontweightForText2
        }">
          <div v-if="nodeModel.titleForText2">{{nodeModel.titleForText2}}</div>
          <div v-if="nodeModel.isShowForText2" :style="{
            'text-decoration': nodeModel.deleteLineForText2
          }">¥{{item.itemModel.marketPrice}}</div>
        </div>
        <!-- 销售价格 -->
        <div style="display: flex;flex-direction: row;align-items: baseline;">
          <div v-if="nodeModel.isShowForText3" :style="{
            'marginTop': nodeModel.marginTopForText3/2+'px',
            'color': nodeModel.colorForText3,
            'font-size': nodeModel.fontsizeForText3/2 + 'px',
            'font-weight': nodeModel.fontweightForText3
          }">¥{{item.itemModel.price}}</div>
          <!-- 销量 -->
          <div style="display: flex;flex-direction: row;align-items: center;margin-left: 8px;" v-if="nodeModel.isShowForText4"
            :style="{
              'marginTop': nodeModel.marginTopForText4/2+'px',
              'color': nodeModel.colorForText4,
              'font-size': nodeModel.fontsizeForText4/2 + 'px',
              'font-weight': nodeModel.fontweightForText4
            }">
            <div v-if="nodeModel.titleForText4">{{nodeModel.titleForText4}}</div>
            <div style="margin-left: 4px;">{{item.itemModel.sales}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {count} from '@/utils/count.js'
  export default {
    components: {
        
    },
    props:{
      nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    data() {
      return {
        
      }
    },
    
    methods:{

    }
  }
</script>

<style lang="scss" scoped>
/* 限制单行,自动省略多余部分 */
.limitLineNumOfOne{
    word-break:break-all;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
</style>